<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#box{
				width: 138px;
				height: 138px;
				background: aqua;
				position: absolute;
			}
		</style>
		<title>面向过程拖拽</title>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			var oBox = null;
			var mouseX = 0;
			var mouseY = 0;
			window.addEventListener('load',function(e){
				console.log('over...');
				oBox = document.querySelector('#box');
				oBox.onmousedown = runDrag;
			});
			function runDrag(e){
				e = e||window.event;
				console.log('zmh...');
				mouseX = e.pageX - oBox.offsetLeft;
				mouseY = e.pageY - oBox.offsetTop;
				document.onmousemove = moveDiv;
				document.onmouseup = upDiv;
			}
			function moveDiv(e){
				e = e||window.event;
				console.log('move...');
				oBox.style.left = e.pageX - mouseX+'px';
				oBox.style.top = e.pageY - mouseY+'px';
			}
			function upDiv(){
				console.log('up...');
				document.onmousemove = null;
				document.onmouseup = null;
			}
		</script>
	</body>
</html>